//音乐播放
function playPause() {
    var ad = document.getElementById("audio1");
    if (ad.paused) {
        ad.play();
        $("#music").addClass("active");
    } else {
        ad.pause();
        $("#music").removeClass("active")
    }
}

//刮图层

//var canvas = document.getElementById("canvas");
var canvas = $("#canvas");
console.log(canvas)
var ctx = canvas[0].getContext("2d");

var img = new Image();
img.src = "images/a.png";

img.onload = function() {
    //9个参数，可以做到截取图片指定区域并在canvas重新绘制
    ctx.drawImage(img, 0, 0);
    // context.drawImage(img,0,0,400,600);
    // context.drawImage(img,10,10,100,200,20,20,100,200);
}

ctx.beginPath();
ctx.fillStyle = "lightgrey";
ctx.lineWidth = 0;
ctx.rect(0, 0, canvas.clientWidth, canvas.clientHeight);
ctx.fill();
ctx.closePath();

var itr;

canvas.on("touchstart", function() {
    $(document).on("touchmove", clearPic);
    // 观察者模式。
    itr = setInterval(calc, 100);


    $(document).on("touchend", function() {
        $(document).off("touchmove");
    });
});

function clearPic(ev) {
    //var e = ev || event || window.event;
    // var e = ev.originalEvent;

    var e = ev.originalEvent.changedTouches[0];
    // console.log(e)
    // console.log(e.clientX)
    ctx.save();
    ctx.beginPath();
    // ctx.lineWidth = 35;
    ctx.arc(e.clientX, e.clientY, 40, 0, 2 * Math.PI);
    // 剪裁指定区域
    ctx.clip();
    ctx.closePath();
    ctx.clearRect(e.clientX - 40, e.clientY - 40, 80, 80);
    ctx.restore();
}

function calc() {
    // 一个像素点是由rgba四个属性组成。
    // 因此，getImageData取出来的数组长度= 像素点的个数*4
    // 例如，canvas的宽200 高300 那么像素点个数 60000
    // getImageData的数组的长度 = 60000 * 4 = 24万
    var data = ctx.getImageData(0, 0, canvas.innerWidth(), canvas.innerHeight()).data;
    //			var data = ctx.getImageData(0,0,640,1138).data;
    //			console.log(data)
    var length = data.length;
    var cnt = 0;

    //检查rgba的a属性，来判断像素点是否透明。
    //并且计算透明点的总个数
    for (var i = 3; i < length; i += 4) {
        if (data[i] == 0) {
            cnt++;
        }
    }

    // 计算擦除的百分比
    if (cnt / (length / 4) > 0.5) {
        ctx.clearRect(0, 0, canvas.innerWidth(), canvas.innerHeight());
        $(document).off("touchmove");
        clearInterval(itr);
        $("#canvas").hide();
        playPause();
        $('head').append("<link rel='stylesheet' type='text/css' href='css/animate.css'> ");
    }
}
